<!--
* @author: XJC
* @date: 2023-11-29 11:43
* @description：addShelves
* @update: 2023-11-29 11:43
-->
<template>
  <div>
    <el-dialog
      :title="mainTitle"
      width="95%"
      top="2vh"
      center
      :before-close="beforeClose"
      :visible="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      custom-class="my-dialog"
      @close="closeDialog"
    >
      <div class="add-shelves" style="height: 90%">
        <div class="add-tip flex flex-a-center">
          <img src="@/assets/shelf_manage_img/d-jiben.png" />
          基本信息
        </div>
        <div class="form-top">
          <el-form
            :model="addForm"
            ref="addForm"
            :rules="addRules"
            label-width="100px"
            label-position="left"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货架名称">
                  <el-input
                    v-model.trim="addForm.name"
                    placeholder="请输入货架名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="货架编号" prop="code">
                  <el-input
                    v-model.trim="addForm.code"
                    placeholder="请输入货架编号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="PLC IP" prop="weighIp">
                  <el-input
                    v-model.trim="addForm.weighIp"
                    :disabled="isBind"
                    placeholder="请输入PLC IP"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="货架类型" prop="type">
                  <el-select
                    v-model.trim="addForm.type"
                    :disabled="isBind"
                    placeholder="请选择货架类型"
                    style="width: 100%">
                    <el-option label="普通货架" :value="1"></el-option>
                    <el-option label="大型货架" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="add-tip flex flex-space-between">
          <div class="flex flex-a-center">
            <img src="@/assets/shelf_manage_img/d-peizhi.png" />
            层数配置
          </div>
          <el-button
            type="primary"
            class="chamfer-98"
            @click="addNewlayer"
          >
            <span class="flex flex-center">
              新增层
              <img class="btn-add" src="@/assets/shelf_manage_img/d-add.png" />
            </span>
          </el-button>
        </div>
        <div
          ref="layerConfig"
          class="layer-config flex"
          :class="{ 'flex-center': addForm.layerList.length === 0 }"
        >
          <el-empty
            v-if="addForm.layerList.length === 0"
            :image-size="50"
            description="暂无层数据，请先新增"
          ></el-empty>

          <div
            class="layer-config-item"
            v-for="(item, index) in addForm.layerList"
            :key="index"
          >
            <div
              class="layer-config-item-top flex flex-space-between flex-center"
            >
              <div>{{ index + 1 }}F</div>
              <div class="c-btn flex flex-a-center">
                <div
                  class="flex flex-a-center"
                  @click="editLayerListItem(item,index)"
                >
                  设置
                  <img src="@/assets/shelf_manage_img/d-setting.png" />
                </div>
                <el-popconfirm
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该层数据吗？"
                  :disabled="isBind || addForm.layerList.length === 1"
                  @confirm="deleteLayerListItem(index)"
                >
                  <div class="c-btn flex flex-a-center" slot="reference" @click="delFn">
                    删除
                    <img src="@/assets/shelf_manage_img/d-delete.png" />
                  </div>
                </el-popconfirm>
              </div>
            </div>
            <div
              class="layer-config-item-bottom flex flex-space-around flex-a-center"
            >
              <div class="layer-config-item-bottom-item">
                <div class="l-c-top">
                  {{ addForm.layerList[index].high | heightTxt }}
                </div>
                <div class="l-c-bottom">层类型</div>
              </div>
              <div class="layer-config-item-bottom-item">
                <div class="l-c-top">
                  {{ addForm.layerList[index].positionList.length }}
                </div>
                <div class="l-c-bottom">库位数</div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-tip flex flex-a-center">
          <img src="@/assets/shelf_manage_img/d-peizhi.png" /> 模拟货架
        </div>
        <smart-shelves :is-add="true" :shelves="addForm"></smart-shelves>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="loading"
          class="dialog-btn"
          type="primary"
          @click="submitForm('addForm')">确定</el-button>
      </span>
      <el-dialog
        width="70%"
        :title="title"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="closeInnerVisible"
        center
        custom-class="my-dialog"
        append-to-body
      >
        <div class="innerBox">
          <div class="innerBox-top">
            <div>
              库位数
              <el-input-number
                @change="numChange"
                v-model="addInnerForm.num"
                :min="minCount"
                :max="maxCount"
                label="库位数目"
              ></el-input-number>
            </div>
            <div class="layers-high flex flex-a-center">
              本层高度
              <div class="layers-num flex flex-center chamfer-corners-10">
                <div
                  :class="{ 'l-select': layerListItem.high === 1 }"
                  @click="chooseHigh(1)"
                >
                  单层
                </div>
                <div
                  :class="{ 'l-select': layerListItem.high === 2 }"
                  @click="chooseHigh(2)"
                >
                  双层
                </div>
              </div>
            </div>
          </div>
          <div class="innerBox-tip flex flex-a-center">
            <img src="@/assets/shelf_manage_img/d-kuwei.png" />
            库位配置
            <span>(磅位、量程请输入数字)</span>
          </div>
          <TransitionGroup tag="ul" name="fade" class="container">
            <div
              class="innerBox-arr flex flex-a-center flex-space-around"
              v-for="(item, index) in layerListItem.positionList"
              :key="index"
            >
              <div class="arr-left">#{{ index + 1 }}</div>
              <div class="arr-center">
                磅位
                <el-input-number
                  :controls='false'
                  v-model="item.weightCode"
                  placeholder="请输入磅位"
                  size="small"
                  controls-position="right"
                  :min="0"
                ></el-input-number>
              </div>
              <div class="arr-right">
                量程
                <el-input-number
                  :controls='false'
                  v-model="item.weightMax"
                  placeholder="请输入量程"
                  size="small"
                  controls-position="right"
                  :min="0"
                ></el-input-number>
              </div>
            </div>
          </TransitionGroup>
        </div>
        <span slot="footer">
          <el-button class="dialog-btn" type="primary" @click="addLayer">{{ isEdit | editTxt }}</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import SmartShelves from '@/components/SmartShelves/index.vue'
import {save, update, removeLayer, remove} from '@/api/shelfManage'

export default {
  name: 'addShelves',
  components: { SmartShelves },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    mainTitle: {
      type: String,
      default: '新增货架'
    },
    editData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isMainEdit: {
      type: Boolean,
      default: false
    },
    isBind: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 限制输入IP
    const validateIPAddress = (rule, value, callback) => {
      const pattern =
        /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?)(,((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?))*$/ // IP address pattern
      if (!pattern.test(value)) {
        callback(new Error('请输入有效的IP地址'))
      } else {
        callback()
      }
    }
    const validateAlphanumeric = (rule, value, callback) => {
      const pattern = /^[a-zA-Z0-9]+$/ // Only allow alphanumeric characters
      if (!pattern.test(value)) {
        callback(new Error('只能输入数字和字母'))
      } else {
        callback()
      }
    }
    return {
      title: '新增层',
      // 层配置弹窗
      innerVisible: false,
      addInnerForm: {
        num: 1
      },
      addRules: {
        // 货架类型 1-普通货架 3-大型货架
        type: [
          { required: true, message: '请选择货架类型', trigger: ['blur','change'] }
        ],
        name: [{ required: true, message: '请输入货架名称', trigger: ['blur','change'] }],
        code: [
          // { required: true, message: '请输入货架编号', trigger: ['blur','change'] },
          // { validator: validateAlphanumeric, trigger: ['blur','change'] },
          {
            min: 0,
            max: 20,
            message: '货架编号过长！',
            trigger: ['blur','change']
          },
        ],
        weighIp: [
          { required: true, message: '请输入PLC IP', trigger: ['blur','change'] },
          { validator: validateIPAddress, trigger: ['blur','change'] }
        ]
      },
      loading: false,
      isEdit: false,
      // 编辑用index
      editIndex: '',
      counterIndex:[],
      // 货架数据-源数据
      addForm: {
        // 编码
        code: '',
        // 高
        highs: 0,
        // 宽
        wides: 0,
        // 长
        longs: 0,
        // 名称
        name: '',
        // 排序
        sort: 1,
        // 状态 0-停用 1-正常
        status: true,
        // 称重IP
        weighIp: '',
        // 是否固定 0-否 1-是
        isFixed: false,
        // 货架类型 1-普通货架 2-中型货架 3-大型货架
        type: 1,
        // 货层
        layerList: []
      },
      // 层数据-源数据
      layerListItem: {
        // 高
        high: 1,
        // 排序
        sort: 1,
        // 	层类型 0 一层一灯 1 一层多灯
        type: 1,
        // 库位
        positionList: [
          {
            // 货位名称
            name: '',
            // 排序
            sort: 1,
            // 称重器承担最大重量 g
            weightMax:0,
            // 称重器所属串号
            weightNum: 0,
            // 称重器校准单位 g
            weightUnit: 0,
            // 磅位
            weightCode: 1,
          }
        ]
      },
      // 库位数据-源数据
      positionListItem: {
        // 货位名称
        name: '',
        // 排序
        sort: 1,
        // 称重器承担最大重量 g
        weightMax: 0,
        // 称重器所属串号
        weightNum: 0,
        // 称重器校准单位 g
        weightUnit: 0,
        // 磅位
        weightCode: null,
      }
    }
  },
  // 计算属性（类似于data概念）
  computed: {
    minCount() {
      if (this.addForm.type === 1) {
        return 1
      }else if (this.addForm.type === 3) {
        return 1
      }
    },
    maxCount() {
      if (this.addForm.type === 1) {
        return 6
      }else if (this.addForm.type === 3) {
        return 10
      }
    }
  },

  // 过滤器
  filters: {
    heightTxt(val) {
      if (val === 1) {
        return '单'
      } else if (val === 2) {
        return '双'
      }
    },
    editTxt(val) {
      if (val) {
        return '确认编辑'
      } else {
        return '确认新增'
      }
    }
  },

  // 监视器（监视data中的数据变化）
  watch: {
    addForm:{
      handler(val){
        if(val.type===1){
          this.layerListItem.positionList=[{
            // 货位名称
            name: '',
            // 排序
            sort: 1,
            // 称重器承担最大重量 g
            weightMax: 0,
            // 称重器所属串号
            weightNum: 0,
            // 称重器校准单位 g
            weightUnit: 0,
            // 磅位
            weightCode: 1,
          }]
        }else if(val.type===3){
          this.layerListItem.positionList=[]
          for(let i = 0; i < 6; i++){
            this.layerListItem.positionList.push({
              // 货位名称
              name: '',
              // 排序
              sort: 1,
              // 称重器承担最大重量 g
              weightMax: 0,
              // 称重器所属串号
              weightNum: 0,
              // 称重器校准单位 g
              weightUnit: 0,
              // 磅位
              weightCode: 0,
            })
          }
        }
      },
    },
    editData: {
      handler(val) {
        if (this.isMainEdit&&val) {
          this.addForm = val
        }
      },
      deep: true
    }
  },

  // 方法合集
  methods: {
    // 库位数量改变
    numChange(val) {
      const currentLength = this.layerListItem.positionList.length;
      if (currentLength > val) {
        this.layerListItem.positionList.splice(val, currentLength - val);
        return;
      }
      const currentLayers = this.addForm.layerList;
      if (this.layerListItem.positionList.length > val) {
        this.layerListItem.positionList.splice(
          val,
          this.layerListItem.positionList.length - val
        )
        return
      } else if (this.layerListItem.positionList.length === val) {
        return
      } else if (this.layerListItem.positionList.length < val) {

        console.log(this.counterIndex);
        let index = val - this.layerListItem.positionList.length
        for (let i = 0; i < index; i++) {
          console.log("----0----",val)
          this.layerListItem.positionList.push({
            // 货位名称
            name: '',
            // 排序
            sort: 1,
            // 称重器承担最大重量 g
            weightMax: 0,
            // 称重器所属串号
            weightNum: 0,
            // 称重器校准单位 g
            weightUnit: 0,
            // 磅位
            weightCode: val,
          })
        }
      }
    },
    // 点击新增层按钮
    addNewlayer(){
      console.log("_-------");
      if (this.isBind) {
        this.$message({
          type: 'error',
          message: '该货架存在绑定物料，只能对货架名称及编号进行编辑。',
        })
        return
      }
      this.addInnerForm.num=this.minCount
      this.innerVisible=true
    },
    // 新增层
    addLayer() {
      console.log(this.addForm.layerList);
      console.log(this.addForm.layerList[0]);
      console.log(this.layerListItem.positionList);

      let weightCodeCounter = 1; // 初始化 weightCode 计数器

      this.$nextTick(() => {
       // console.log(this.addForm.layerList[0]);
        let counter = 1; // 开始计数
        const weightCodes = this.addForm.layerList.flatMap(item =>
          item.positionList.map(position => counter++) // 每次递增
        );
        console.log(weightCodes);
        this.counterIndex = weightCodes;
      });

     ;
      if (this.isEdit) {
        // 编辑层
        this.addForm.layerList.splice(
          this.editIndex,
          1,
          this.layerListItem
        )
      } else {
        // 新增层
        this.addForm.layerList.push(this.layerListItem)
      }
      // 关闭弹窗
      this.innerVisible = false
      this.editIndex = ''
    },
    // 关闭层配置弹窗
    closeInnerVisible() {
      // 恢复层配置弹窗默认值
      this.layerListItem = {
        // 高
        high: 1,
        // 排序
        sort: 1,
        // 	层类型 0 一层一灯 1 一层多灯
        type: 1,
        // 库位
        positionList: [
          {
            // 货位名称
            name: '',
            // 排序
            sort: 1,
            // 称重器承担最大重量 g
            weightMax: 0,
            // 称重器所属串号
            weightNum: 0,
            // 称重器校准单位 g
            weightUnit: 0,
            // 磅位
            weightCode: 1,
          }
        ]
      }
      this.addInnerForm.num = 1
      this.isEdit = false
      this.title = '新增层'
    },
    delFn(){
      // if (this.isBind) {
      //   this.$message({
      //     type: 'error',
      //     message: '该货架存在绑定物料，只能对货架名称及编号进行编辑。'
      //   })
      //   return
      // }
      // if (this.addForm.layerList.length === 1) {
      //   this.$message({
      //     type: 'error',
      //     message: '货架至少有一层。'
      //   })
      //   return
      // }
    },
    // 删除层
    deleteLayerListItem(index) {
      if (this.isBind) {
        this.$message({
          type: 'error',
          message: '该货架存在绑定物料，只能对货架名称及编号进行编辑。'
        })
        return
      }
      if (this.addForm.layerList.length === 1) {
        this.$message({
          type: 'error',
          message: '货架至少有一层。'
        })
        return
      }
      let layerId = this.addForm.layerList[index].id
      if (layerId) {
        removeLayer([layerId]).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.addForm.layerList.splice(index, 1)
        })
      } else {
        this.addForm.layerList.splice(index, 1)
      }

    },
    // 编辑层
    editLayerListItem(item,index) {
      if (this.isBind) {
        this.$message({
          type: 'error',
          message: '该货架存在绑定物料，只能对货架名称及编号进行编辑。',
        })
        return
      }
      this.editIndex = index
      this.title = '编辑层'
      this.isEdit = true
      let item1 = JSON.parse(JSON.stringify(item))
      this.layerListItem = item1
      this.addInnerForm.num = item1.positionList.length
      this.innerVisible = true
    },
    // 组件关闭前回调，通过父组件监听dialogClose事件，来关闭弹窗
    beforeClose() {
      // 货架数据-源数据
      this.addForm = {
        // 编码
        code: '',
        // 高
        highs: 0,
        // 宽
        wides: 0,
        // 长
        longs: 0,
        // 名称
        name: '',
        // 排序
        sort: 1,
        // 状态 0-停用 1-正常
        status: true,
        // 称重IP
        weighIp: '',
        // 是否固定 0-否 1-是
        isFixed: false,
        // 货架类型 1-普通货架 2-中型货架 3-大型货架
        type: 1,
        // 货层
        layerList: []
      }
      // 层数据-源数据
      this.layerListItem = {
        // 高
        high: 1,
        // 排序
        sort: 1,
        // 	层类型 0 一层一灯 1 一层多灯
        type: 1,
        // 库位
        positionList: [
          {
            // 货位名称
            name: '',
            // 排序
            sort: 1,
            // 称重器承担最大重量 g
            weightMax: 0,
            // 称重器所属串号
            weightNum: 0,
            // 称重器校准单位 g
            weightUnit: 0,
            // 磅位
            weightCode: 1,
          }
        ]
      }
      // 库位数据-源数据
      this.positionListItem = {
        // 货位名称
        name: '',
        // 排序
        sort: 1,
        // 称重器承担最大重量 g
        weightMax: 0,
        // 称重器所属串号
        weightNum: 0,
        // 称重器校准单位 g
        weightUnit: 0,
        // 磅位
        weightCode: 1,
      }
      this.$emit('dialogClose', false, true)
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          // this.addForm.name=this.addForm.layerList.length+'层型货架'
          if (this.addForm.name){
            this.addForm.name=this.addForm.name.trim()
          }
          if (this.isMainEdit) {
            // 编辑
            update(this.addForm).then((res) => {
              if (res.status === '2000') {
                this.$message.success('编辑成功')
                this.loading = false
                this.$emit('dialogClose', false, true)
              } else {
                this.$message.error(res.msg)
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }
          // 新增
          save(this.addForm).then((res) => {
            if (res.status === '2000') {
              this.$message.success('新增成功')
              this.loading = false
              this.$emit('dialogClose', false, true)
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    // 关闭弹窗，清楚表单验证
    closeDialog() {
      this.$refs['addForm'].resetFields()// 货架数据-源数据
      this.addForm = {
        // 编码
        code: '',
        // 高
        highs: 0,
        // 宽
        wides: 0,
        // 长
        longs: 0,
        // 名称
        name: '',
        // 排序
        sort: 1,
        // 状态 0-停用 1-正常
        status: true,
        // 称重IP
        weighIp: '',
        // 是否固定 0-否 1-是
        isFixed: false,
        // 货架类型 1-普通货架 2-中型货架 3-大型货架
        type: 1,
        // 货层
        layerList: []
      }
      // 层数据-源数据
      this.layerListItem = {
        // 高
        high: 1,
        // 排序
        sort: 1,
        // 	层类型 0 一层一灯 1 一层多灯
        type: 1,
        // 库位
        positionList: [
          {
            // 货位名称
            name: '',
            // 排序
            sort: 1,
            // 称重器承担最大重量 g
            weightMax: 0,
            // 称重器所属串号
            weightNum: 0,
            // 称重器校准单位 g
            weightUnit: 0,
            // 磅位
            weightCode: 1,
          }
        ]
      }
      // 库位数据-源数据
      this.positionListItem = {
        // 货位名称
        name: '',
        // 排序
        sort: 1,
        // 称重器承担最大重量 g
        weightMax: 0,
        // 称重器所属串号
        weightNum: 0,
        // 称重器校准单位 g
        weightUnit: 0,
        // 磅位
        weightCode: 1,
      }
    },
    chooseHigh(high) {
      this.layerListItem.high = high
    }
  },

  // 生命周期 - 创建完成（可以访问当前this实例，完成了data 数据的初始化，可以访问data、computed、watch、methods上的方法和数据。但是，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空。）
  created() {},

  // 生命周期 - 挂载完成（可以访问DOM元素，一般在此执行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。）
  mounted() {},
  // 生命周期-页面销毁前（在销毁前，实例中所有的data、methods、computed、指令等，都处于可用状态在此阶段，一般进行：关闭定时器、取消订阅消息解绑自定义事件等收尾工作。）
  beforeDestroy() {}
}
</script>

<style scoped lang="scss">
@import '~@/styles/_handle.scss';

::v-deep .my-dialog {
  .el-dialog__body {
    padding: 0;
  }
}
.add-shelves {
  padding: 20px;
  height: 1000px;
  overflow: hidden;
  overflow-y: auto;

  .add-tip {
    height: 50px;
    line-height: 50px;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    @include background('dialog_div_tip_color');
    -webkit-clip-path: polygon(
      10px 0,
      100% 0,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    clip-path: polygon(
      10px 0,
      100% 0,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    @include background-size('dialog_div_tip_size');

    img {
      width: 20px;
      margin: 0 10px 0 20px;
    }

    .el-button {
      font-size: 18px;
      padding: 0;
      line-height: normal;
    }

    .btn-add {
      width: 16px;
      margin-left: 5px;
    }
  }

  .form-top {
    @include background('dialog_div_bg_color');
    padding: 20px 20px 0 20px;
    margin-bottom: 20px;
    -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
  }

  .layer-config {
    @include background('dialog_div_bg_color');
    -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    width: 100%;
    height: 160px;
    margin-bottom: 20px;
    padding: 10px;
    overflow-x: auto;

    .el-empty {
      padding: 0;
    }

    &-item {
      flex-shrink: 0;
      margin-right: 10px;
      width: 220px;
      height: 100%;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
      @include background('dialog_ninner_bg_color');

      &-top {
        height: 50px;
        padding: 0 10px;
        @include background('dialog_c_bg_color');

        .c-btn {
          cursor: pointer;
          font-size: 18px;
          margin-left: 10px;

          img {
            width: 18px;
            margin-left: 2px;
          }
        }
      }

      &-bottom {
        align-items: center;
        height: 90px;
        text-align: center;

        &-item {
          font-size: 28px;

          .l-c-top {
            margin-bottom: 4px;
          }

          .l-c-bottom {
            padding-top: 4px;
            border-top: 1px solid #ffffff;
            font-size: 18px;
          }
        }
      }
    }
  }
}

.innerBox {
  padding: 20px;
  height: 100%;
  overflow: hidden;
  color: #ffffff;

  &-top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    @include background_color('dialog_header_title_bg_color');
    padding: 20px;
    margin-bottom: 20px;
    -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );

    ::v-deep .el-input-number {
      -webkit-clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
      );
      clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
      );
    }

    ::v-deep .el-input-number .el-input__inner {
      @include background('dialog_ninner_bg_color');
      color: #ffffff;
      border: none;
    }

    ::v-deep .el-input-number .el-input-number__increase {
      @include background('dialog_n-side_bg_color');
      border: none;
      color: #ffffff;
      font-weight: 600;
      font-size: 20px;
      -webkit-clip-path: polygon(
        calc(100% - 10px) 0%,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 0
      );
      clip-path: polygon(
        calc(100% - 10px) 0%,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 0
      );
    }

    ::v-deep .el-input-number .el-input-number__decrease {
      -webkit-clip-path: polygon(
        10px 0,
        100% 0,
        100% 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
      );
      clip-path: polygon(
        10px 0,
        100% 0,
        100% 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
      );
      @include background('dialog_n-side_bg_color');
      border: none;
      font-weight: 600;
      font-size: 20px;
    }

    .layers-num {
      margin-left: 10px;
      width: 180px;
      height: 40px;
      background: #eff1f3;
      color: #000000;
      user-select: none;
      text-align: center;

      > div {
        transition: 0.5s all;
        width: 50%;
        height: 100%;
        line-height: 40px;
        cursor: pointer;
      }

      .l-select {
        color: #ffffff;
        @include background('dialog_n-side_bg_color');
      }
    }
  }

  &-tip {
    height: 50px;
    line-height: 50px;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    @include background('dialog_div_tip_color');
    -webkit-clip-path: polygon(
      10px 0,
      100% 0,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    clip-path: polygon(
      10px 0,
      100% 0,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    @include background-size('dialog_div_tip_size');
    >span{
      margin-left: 20px;
      font-size: 14px;
    }
    img {
      width: 20px;
      margin: 0 10px 0 20px;
    }
  }

  &-arr {
    margin-bottom: 20px;

    .arr-left {
      width: 98px;
      height: 48px;
      line-height: 48px;
      @include background_image('shelf_arr_left_num_bg_color');
      background-size: 100% 100%;
      text-align: center;
      font-size: 20px;
      font-weight: 500;
      @include font_color('shelf_arr_left_color');
    }

    .arr-center {
      flex: 1;
      padding-left: 30px;
      height: 40px;
    }

    .arr-right {
      flex: 1;
      padding-left: 30px;
    }

    ::v-deep .el-input-number {
      height: 40px;
      width: calc(100% - 40px);
      -webkit-clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
      );
      clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
      );
    }

    ::v-deep .el-input-number .el-input__inner {
      width: 100%;
      @include background('form_top_bg_color');
      color: #ffffff;
      border: none;
      height: 40px;
    }

  }
}

.container {
  position: relative;
  height: 100%;
  padding: 0;
  margin: 0;
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>
